{% extends 'base.html' %}

{% block body %}

<!-- ===== Pricing Notice ===== -->
<div class="alert alert-success alert-dismissible fade show shadow-sm text-center mt-4 mx-3" role="alert">
  <strong><i class="bi bi-info-circle"></i> Note:</strong> ₹80 will be charged for every new cricket ball including the first one.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- ===== Pricing Section ===== -->
<section class="pricing-section py-5">
  <div class="container">
    <h1 class="text-center fw-bold text-success mb-5">
      <i class="bi bi-currency-rupee"></i> Pricing Details
    </h1>

    <div class="card shadow-lg border-0 rounded-4 overflow-hidden">
      <div class="table-responsive">
        <table class="table table-hover text-center align-middle mb-0">
          <thead class="table-success text-dark">
            <tr>
              <th scope="col" class="fw-bold fs-5 py-3">Day / Time</th>
              <th scope="col" class="fw-bold fs-5 py-3">6 AM - 12 PM</th>
              <th scope="col" class="fw-bold fs-5 py-3">12 PM - 6 PM</th>
              <th scope="col" class="fw-bold fs-5 py-3">6 PM - 6 AM</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="bg-dark text-white fs-5 py-3" scope="row">Weekday</th>
              <td class="bg-light fs-5 py-3 fw-semibold text-success">₹800</td>
              <td class="bg-light fs-5 py-3 fw-semibold text-success">₹700</td>
              <td class="bg-light fs-5 py-3 fw-semibold text-success">₹900</td>
            </tr>
            <tr>
              <th class="bg-dark text-white fs-5 py-3" scope="row">Weekend</th>
              <td class="bg-light fs-5 py-3 fw-semibold text-success">₹900</td>
              <td class="bg-light fs-5 py-3 fw-semibold text-success">₹800</td>
              <td class="bg-light fs-5 py-3 fw-semibold text-success">₹1000</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="text-center mt-5">
      <a href="/booking" class="btn btn-success rounded-pill px-5 py-2 shadow-sm">
        <i class="bi bi-calendar-plus"></i> Book Your Slot Now
      </a>
    </div>
  </div>
</section>

<!-- ===== Custom CSS ===== -->
<style>
  body {
    background: linear-gradient(135deg, #f8fff8, #ffffff);
  }

  .pricing-section {
    min-height: 80vh;
  }

  .card {
    border-radius: 20px;
    transition: all 0.3s ease-in-out;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
  }

  table {
    border-collapse: separate;
    border-spacing: 0 0.5rem;
  }

  thead th {
    background-color: #198754 !important;
    color: #fff;
  }

  tbody td {
    transition: all 0.2s ease;
  }

  tbody tr:hover td {
    background-color: #eafaf1;
  }

  .btn-success {
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .btn-success:hover {
    background-color: #218838;
    transform: translateY(-2px);
  }

  @media (max-width: 768px) {
    .table th, .table td {
      font-size: 0.95rem;
      padding: 0.75rem;
    }
  }
</style>

{% endblock body %}